<template>
  <div class="dashboard-content">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card>
          <div class="card-title">今日生产任务</div>
          <div class="card-value">{{ todayTaskCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">在线设备</div>
          <div class="card-value online">{{ onlineCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">离线设备</div>
          <div class="card-value offline">{{ offlineCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-title">库存预警TOP1</div>
          <div class="card-value warning">{{ (stockWarning[0] && stockWarning[0].name) || '-' }}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <div class="card-title">近7天生产任务趋势</div>
          <div ref="lineChart" style="height:320px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="card-title">设备状态分布</div>
          <div ref="pieChart" style="height:320px;width:100%"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getShengchanList } from '@/utils/shengchanLocal'
import { getShebeiList } from '@/utils/shebeixinxiLocal'
import { getStockList } from '@/utils/kucunLocal'
import * as echarts from 'echarts'

// 首页仪表盘页面，展示生产任务、设备状态、库存预警等信息
function getLast7Days() {
	// 获取最近7天日期数组
	const days = []
	const today = new Date()
	for (let i = 6; i >= 0; i--) {
		const d = new Date(today)
		d.setDate(today.getDate() - i)
		days.push(d.toISOString().slice(0, 10))
	}
	return days
}

export default {
	data() {
		return {
			todayTaskCount: 0,
			onlineCount: 0,
			offlineCount: 0,
			stockWarning: [],
			lineChart: null,
			pieChart: null,
		}
	},
	mounted() {
		// 页面加载时统计今日任务、设备状态、库存预警
		const all = getShengchanList()
		const today = new Date().toISOString().slice(0, 10)
		const plans = all.filter(p => (p.status === '进行中') && ((p.date || p.riqi || '').indexOf(today) === 0))
		this.todayTaskCount = plans.length
		// 设备状态统计
		const shebei = getShebeiList()
		this.onlineCount = shebei.filter(s => s.zhuangtai === '在线').length
		this.offlineCount = shebei.filter(s => s.zhuangtai === '离线').length
		// 库存预警TOP5
		const stock = getStockList().sort((a, b) => a.stock - b.stock).slice(0, 5)
		this.stockWarning = stock
		this.$nextTick(() => {
			this.initLineChart()
			this.initPieChart()
		})
	},
	methods: {
		// 初始化折线图，展示近7天生产任务趋势
		initLineChart() {
			if (!this.$refs.lineChart) return
			if (!this.lineChart) {
				this.lineChart = echarts.init(this.$refs.lineChart)
			}
			const days = getLast7Days()
			const all = getShengchanList()
			const data = days.map(day =>
				all.filter(p => (p.status === '进行中') && ((p.date || p.riqi || '').indexOf(day) === 0)).length
			)
			this.lineChart.setOption({
				tooltip: { trigger: 'axis' },
				xAxis: { type: 'category', data: days },
				yAxis: { type: 'value', minInterval: 1 },
				series: [{
					data,
					type: 'line',
					smooth: true,
					areaStyle: {},
					name: '任务数',
					color: '#409EFF',
				}],
				grid: { left: 40, right: 20, bottom: 40, top: 40 }
			})
		},
		// 初始化饼图，展示设备状态分布
		initPieChart() {
			if (!this.$refs.pieChart) return
			if (!this.pieChart) {
				this.pieChart = echarts.init(this.$refs.pieChart)
			}
			const shebei = getShebeiList()
			const online = shebei.filter(s => s.zhuangtai === '在线').length
			const offline = shebei.filter(s => s.zhuangtai === '离线').length
			this.pieChart.setOption({
				tooltip: { trigger: 'item' },
				legend: { bottom: 0 },
				series: [{
					name: '设备状态',
					type: 'pie',
					radius: '60%',
					data: [
						{ value: online, name: '在线', itemStyle: { color: '#67C23A' } },
						{ value: offline, name: '离线', itemStyle: { color: '#F56C6C' } },
					],
					label: { formatter: '{b}: {c}台 ({d}%)' }
				}]
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.dashboard-content {
	width: 100%;
	padding: 40px 0;
}
.card-title {
	font-size: 16px;
	color: #666;
	margin-bottom: 8px;
}
.card-value {
	font-size: 32px;
	font-weight: bold;
	margin-top: 8px;
}
.card-value.online {
	color: #67C23A;
}
.card-value.offline {
	color: #F56C6C;
}
.card-value.warning {
	color: #E6A23C;
}
</style>